<template>
	<div>
		<el-row class="my-row">
			<el-col :span="3">
				<div class="grid-content grid-flex">
					<i class="el-icon-s-operation icon-menu"></i>
				</div>
			</el-col>
			<el-col :span="3" :offset="18">
				<div class="grid-content grid-flex">
					<i class="el-icon-s-tools icon-menu" @click="show = !show"></i>
				</div>
			</el-col>
			<div class="loginout" v-show="show" @click="logout">
				退出登录
			</div>
		</el-row>
		<div class="header">
			<div class="banner"></div>
			<div class="part1">
				<div class="face">
					<!-- user.name ? user.userimg : img -->
					<img :src="img" class="bfs-img avatar">
				</div>
				<div class="relation" v-if="user.name">
					<div class="base">
						<span class="name">{{user.name}}</span> 
						<span class="gender">·</span> 
						<span class="level">lv1</span> 
					</div> 
					<div class="follow-btn">
						<button class="white">编辑资料</button>
					</div>
				</div>
				<div class="relation" v-else>
					<div class="follow-btn">
						<button class="white" @click="btnlogin">您还未登录，请先登录~~</button>
					</div>
				</div>
			</div>
			<div class="part2">
				<!-- <div class="base">
					<span class="name">{{user.user}}_三九二十七_</span> 
					<span class="gender">·</span> 
					<span class="level">lv1</span> 
				</div> -->
				<div class="desc">
					<span class="content">这个人很神秘，什么都没有写</span> 
					<a class="spread-btn">展开</a>
				</div>
				<div class="clearfloat"></div>
			</div>
		</div>
		<el-tabs v-model="activeName" class="tabs">
			<el-tab-pane label="我的动态" name="first">
				<div class="my-state" v-if="user.name">
					<div class="s-item" v-for="item in statelist" :key='item.id'>
						<div class="user">
							<div class="img">
								<img :src="item.userimg" >
							</div>
							<div class="my-main">
								<div class="tt">
									<p class="user-name">{{item.username}}</p>
									<p class="send-time">
										<span class="date">{{item.time}}</span>
									</p>
								</div>
							</div>
							<div class="more">
								<i class="el-icon-more" @click="show1 = !show1"></i>
							</div>
						</div>
						<div class="user-content">
							<p>{{item.title}}</p>
							<p class="c-img">
								<img :src="item.img" >
							</p>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="我的评论" name="second">我的评论</el-tab-pane>
		</el-tabs>
		<Nav></Nav>
	</div>
</template>

<script>
import Nav from '../tabnav.vue'
import {mapState} from 'vuex'
export default {
	name: 'My',
	data(){
		return{
			activeName:'first',
			show:false,
			show1:false,
			img:require('../../assets/yashe.webp'),
			statelist:[]
		}
	},
	methods:{
		btnlogin(){
			this.$router.push({name:'Login'})
		},
		logout(){
			this.$store.dispatch('LogOut')
			this.show = false
		},
		getStatelist(){
			const list = JSON.parse(window.localStorage.getItem( "upload")) || [];
			const u = JSON.parse(window.sessionStorage.getItem( "currUser")) || [];
			let that = this
			that.$nextTick(function() {
				list.forEach(function(item){
					if(item.username == u.user){
						that.statelist.push(item)
						console.log(that.statelist)
					}
				})
			});
		}
	},
	created(){
		this.getStatelist()
	},
	computed:mapState({
		user:state => state.user,
	}),
	components:{
		Nav
	}
}
</script>

<style scoped lang="scss">
	@import 'my.scss';
</style>
